<template>
  <div>
    <div class="search">
      <a-form :model="searchForm" :labelCol="labelCol">
        <a-row :gutter="20">
          <a-col :span="4" :lg="4" :xs="12" :md="8">
            <a-form-item label="订单号">
              <a-input placeholder="请输入订单号" v-model:value="searchForm.number" allow-clear></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="3" :lg="4" :xs="12" :md="8">
            <a-form-item label="申请人">
              <a-input placeholder="请输入申请人" v-model:value="searchForm.name" allow-clear></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6" :lg="6" :xs="12" :md="8">
            <a-form-item label="申请时间">
              <a-range-picker v-model:value="time" @change="selectTime" format="YYYY/MM/DD HH:mm:ss"></a-range-picker>
            </a-form-item>
          </a-col>
          <a-col :span="6" :lg="6" :xs="12" :md="8">
            <a-form-item label="退款状态">
              <a-select ref="select" v-model:value="searchForm.status" @focus="focus" placeholder="请选择退款状态">
                <a-select-option v-for="item in orderListStatus" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="2">
            <a-button type="primary" @click="search" class="d-a-center">搜索</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      :columns="colums"
      :data-source="list"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      :row-selection="rowSelection"
      :scroll="{ y: 540 }"
      :scrollToFirstRowOnChange="true"
    >
      <template #status="{ record }">
        <a-tag :color="orderListStatusColor(record.status)">{{ orderStatus(record.status) }}</a-tag>
      </template>
      <template #operation="{ record }">
        <div>
          <a-button type="link" @click="look(record)" v-has="{ a: $route, b: 1 }">查看</a-button>
          <a-button type="link" v-if="record.status == 9" @click="deal(record)" v-has="{ a: $route, b: 2 }">处理</a-button>
        </div>
      </template>
    </a-table>
    <a-modal :visible="visible" title="退款服务信息" @cancel="closeModal('visible')" width="80%" :footer="null">
      <a-descriptions bordered :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
        <a-descriptions-item label="订单状态">{{ orderStatus(order.status) }}</a-descriptions-item>
        <a-descriptions-item label="订单号"
          >{{ order.number }}
          <a-button type="link" @click="lookOrder">查看</a-button>
        </a-descriptions-item>
        <a-descriptions-item label="申请时间">{{ order.createdAt }}</a-descriptions-item>
        <a-descriptions-item label="申请人">{{ order.name }}</a-descriptions-item>
        <a-descriptions-item label="实际退款金额">{{ order.endPrice }}</a-descriptions-item>
        <a-descriptions-item v-if="order.status == 10" label="拒绝备注">{{ order.occupation }}</a-descriptions-item>
      </a-descriptions>
      <a-row :gutter="20" justify="space-around" style="margin-top: 30px">
        <a-col :span="4" v-if="!isEdit">
          <a-button type="info" @click="closeModal('visible')">关闭</a-button>
        </a-col>
        <template v-else>
          <a-col :span="4">
            <a-button type="danger" @click="reject">拒绝退款</a-button>
          </a-col>
          <a-col :span="4">
            <a-button type="primary" @click="confirm">确认退款</a-button>
          </a-col>
        </template>
      </a-row>
    </a-modal>

    <a-modal v-if="visible1" v-model:visible="visible1" title="拒绝原因" @ok="rejectRefund" width="50%" okText="拒绝">
      <a-form :model="rejectForm" ref="rejectRef" :rules="rules">
        <a-form-item label="请输入退款原因" name="reason">
          <a-textarea v-model:value="rejectForm.reason" placeholder="请输入退款原因" :auto-size="{ minRows: 2, maxRows: 5 }" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { reactive, createVNode, toRefs, computed } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { deleteObjBlank } from '@/assets/js/common.js'
import { PlusOutlined } from '@ant-design/icons-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { selectAliRefundOrder } from '@/api/order/refund'
import { confirmRefund, ProcessCancelOrder } from '@/api/order/index'
import { useRouter } from 'vue-router'
import { useModal } from '@/hooks'
export default {
  components: {
    PlusOutlined,
    ExclamationCircleOutlined
  },
  setup() {
    const data = reactive({
      rejectForm: {},
      rejectRef: '',
      visible1: false,
      loading: true,
      searchForm: {},
      list: [],
      form: {},
      visible: false,
      order: {},
      time: [], //申请时间
      isEdit: false
    })
    const rules = {
      reason: [
        {
          required: true,
          trigger: 'blur',
          message: '请输入退款原因！！！'
        }
      ]
    }
    const router = useRouter()
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    })
    const orderListStatus = [
      {
        name: '全部',
        id: 0
      },
      {
        name: '已退款',
        id: 7
      },
      {
        name: '待审核',
        id: 9
      },
      {
        name: '已拒绝',
        id: 10
      }
    ]
    const orderStatus = status => {
      let title = ''
      switch (status) {
        case 9:
          title = '待审核'
          break
        case 7:
          title = '已退款'
          break
        case 10:
          title = '已拒绝'
          break
      }
      return title
    }

    const colums = [
      {
        title: '订单号',
        dataIndex: 'number',
        className: 'table'
      },
      {
        title: '申请时间',
        dataIndex: 'createdAt',
        className: 'table'
      },
      {
        title: '申请人',
        dataIndex: 'name',
        className: 'table'
      },
      {
        title: '退款状态',
        dataIndex: 'status',
        className: 'table',
        slots: {
          customRender: 'status'
        }
      },
      {
        title: '处理时间',
        dataIndex: 'updateAt',
        className: 'table'
      },

      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        fixed: 'right',
        // width: 150,
        // align: "center",
        slots: {
          customRender: 'operation'
        }
      }
    ]
    const orderListStatusColor = computed(status => {
      return function (status) {
        if (status == 9) {
          return 'error'
        }
        if (status == 7) {
          return 'success'
        }
        if (status == 10) {
          return '#f50'
        }
      }
    })

    // 分页器/-
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))
    const selectTime = (e, dateString) => {
      data.searchForm.startTime = dateString[0]
      data.searchForm.endTime = dateString[1]
    }
    const closeModal = e => {
      data[e] = false
    }
    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      // console.log(pagination, "当前分页");
      page.current = pagination.current
      page.pageSize = pagination.pageSize
      // 请求列表接口
      init()
    }
    const look = e => {
      data.isEdit = false
      data.order = e
      data.visible = true
    }
    const deal = e => {
      data.order = e
      data.isEdit = true
      data.visible = true
    }
    const search = () => {
      page.current = 1
      if (data.searchForm.status == 0) {
        delete data.searchForm['status']
      }
      init()
    }
    const confirm = () => {
      const { closeModal } = useModal.confirm({
        title: '确定确认退款吗?',
        icon: createVNode(ExclamationCircleOutlined),
        content: '退款金额将会原路返回到申请者账户。',
        onOk: async () => {
          let obj = {
            number: data.order.number,
            status: 7
          }
          let res = await confirmRefund(obj)
          if (res.success) {
            message.success('退款成功')
            visible1.value = false
            init()
            closeModal()
          } else {
            message.error('退款失败')
          }
        }
      })
    }
    const reject = e => {
      data.visible1 = true
    }
    const rejectRefund = () => {
      data.rejectRef.validate().then(() => {
        const { closeModal } = useModal.confirm({
          title: '确认拒绝退款吗?',
          icon: createVNode(ExclamationCircleOutlined),
          onOk: async () => {
            let obj = {
              content: data.rejectForm.reason,
              number: data.order.number,
              status: 10
            }
            let res = await ProcessCancelOrder(obj)
            if (res.success) {
              message.success('拒绝退款成功')
              visible1.value = false
              init()
              closeModal()
            } else {
              message.error('操作失败')
            }
          }
        })
      })
    }
    const lookOrder = () => {
      router.push({
        path: '/order/center/order-detail',
        query: { number: data.order.number, isEdit: 0 }
      })
    }

    init()
    async function init() {
      deleteObjBlank(data.searchForm)
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
        ...data.searchForm
      }
      let res = await selectAliRefundOrder(obj)
      if (res.success) {
        res.object.list.map(el => (el.key = el.number))
        data.list = res.object.list
        page.total = res.object.total
        data.loading = false
      }
    }
    return {
      ...toRefs(data),
      orderListStatus,
      colums,
      orderStatus,
      orderListStatusColor,
      pagination,
      closeModal,
      look,
      rules,
      labelCol: { style: { fontWeight: 'bold' } },
      deal,
      // 请求列表接口
      handleTableChange,
      search,
      selectTime,
      lookOrder,
      confirm,
      reject,
      rejectRefund
    }
  }
}
</script>
<style scoped>
.search {
  margin-bottom: 20px;
}
</style>
